<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!--  客户管理  -->
      <!-- 顶部 -->
      <Toptoolbar>
        <template #leftbtn>
          <el-button type="primary" @click="visagents = true">添加客户</el-button>
        </template>
        <!-- 经纪下拉菜单 -->
        <template #select>
          <el-dropdown @command="getagent">
            <el-button>
              全部经纪<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in agentlist" :key="item.id" :command="item.id">{{ item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template #search>
          <template>
            <el-select
              v-model="value"
              clearable
              width="500px"
              filterable
              remote
              :remote-method="remoteMethod"
              :loading="loading"
              placeholder="请输入关键字"
              @change="changevalue"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </template>
          <el-button icon="el-icon-search" @click="searchclient" />
        </template>
      </Toptoolbar>
      <!--表格-->
      <el-card>
        <clientbrokerTable :table-data="clientslist" :data="agentobj" @Addclient="addCustomer" @delclient="delclient">
          <!-- 给子组件插入内容 -->
          <template #broker>
            <el-table-column
              :formatter="getformatter"
              prop="agent"
              label="经纪"
            /></template>
          <template #wchat>
            <el-table-column
              prop="wechat"
              label="微信"
            /></template>

        </clientbrokerTable>
        <!-- 分页器 -->
        <el-row type="flex" justify="center" class="pagination">
          <el-pagination
            background
            :page-size="clientsdata._limit"
            layout="prev, pager, next"
            :total="total"
            :current-page.sync="currentpage"
            @current-change="currentchange"
          />
        </el-row>
      </el-card>
      <!-- 弹窗 -->
      <addclients ref="addclients" :visagents.sync="visagents" :clientsid="clientsid" @getlist="getlist()" />
    </div>
  </div>
</template>
<script>
import { getclientslist, delclients, getTotal } from '@/api/clients'
import { getAgentslist } from '@/api/agents'
import addclients from './components/addclients.vue'

export default {
  components: { addclients },
  data() {
    return {
      clientslist: [],
      agentobj: {},
      clientsdata: {
        _limit: 2, // 每页的获取条数
        _start: 0, // 开始获取的位置
        name_contains: '', // 模糊搜索
        agent: 0// 筛选经纪人，传入经纪人id
      },
      visagents: false,
      total: 0, // 数据总数量
      // 客户id
      clientsid: 0,
      value: '', // 搜索框绑定值
      loading: false, // 加载
      options: {}, // 模糊搜索
      agentlist: {}, // 经纪列表
      currentpage: 1// 页码
    }
  },
  async  created() {
    this.getlist()
    // 每页展示的数量*（当前页码-1）+ 下标值+1
    // 获取经纪人列表
    const agents = await getAgentslist()
    console.log(112, agents)
    this.agentlist = agents.data
  },
  methods: {
    // 获取客户列表
    async  getlist() {
      const current = (this.currentpage - 1) * this.clientsdata._limit
      const res = await getclientslist({ _limit: this.clientsdata._limit, _start: current })
      this.clientslist = res.data
      console.log(2222, this.clientslist)
      // 总数量
      const total = await getTotal()
      this.total = total.data
    },
    // 弹窗获取当前点击用户的id作为事件对象
    addCustomer(id) {
      this.visagents = true
      this.clientsid = id
      this.$refs.addclients.getclients(id)
    },
    // 替换当前经纪人列的数据
    // 这里数据有问题，cell的数据昨天有今天没有
    getformatter(row, col, cell) {
      if (cell && cell.name) {
        return cell.name
      }

      // console.log(130, cell)
    },
    // 模糊查询
    async   remoteMethod(val) {
      // 如果当前输入的不为空
      if (val !== '') {
        this.loading = true
        // 根据当前输入的用户名获取用户列表
        const res = await getclientslist({ name_contains: val })
        this.loading = false
        // 在下拉菜单遍历
        this.options = res.data
      }
      // console.log(888, this.value)
    },
    // change事件回调参数为当前的选中值
    changevalue() {
      // 在这里可以看到当前v-model绑定的值的变化
      console.log(8888, this.value)
    },
    // 删除客户
    delclient(id) {
      this.$confirm('确定要删除用户吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调接口
        await delclients(id)
        if (this.clientslist.length <= 1 && this.currentpage !== 1) {
          this.currentpage--
        }
        // 提示
        this.$message({
          type: 'success',
          message: '删除成功'
        })

        // 渲染
        this.getlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页切换获取数据
    currentchange(val) {
      if (val === 1) {
        this.currentpage = 1
      } else {
        // 当前每一页的总条数为2，但下标为1
        // 点击2，需要获取到下标为2的数据
        // 每页的总条数乘当前的页码-1就是下一页获取的第一条数据
        // 比如，当前是第一页，总条数为2，下标为0，1 总条数乘1
        // 那么第二页的第一条数据就是数组中下标为2的数据
        // 第二页两条，为2，3下标，点击第三页，将将3-1乘2那么第三页的第一条数据就是下标为4的数据
        this.currentpage = val
      }

      this.getlist()
    },
    // 搜索按钮
    // 调用接口，渲染页面
    async searchclient() {
      // 非空判断
      if (this.value === '') {
        return
      }
      // 在点击搜索按钮，重新调用接口传入模糊搜索的参数进去，也就是当前点击的这个选项
      const res = await getclientslist({ name_contains: this.value })
      // 再把这个值赋值给渲染列表的数组
      this.clientslist = res.data
      this.value = ''
    },
    // 下拉菜单获取数据
    async getagent(id) {
      const res = await getclientslist({ agent: id })
      this.clientslist = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.pagination{
  margin-top: 20px;
}
</style>
